<template>
  <div class="main_width">
    <el-form ref="form" :disabled="audio_edit.state!=1">
      <div>
        <el-upload
          class="upload-demo"
          drag
          :http-request="addfile"
          :show-file-list="false"
          accept="audio/wav,audio/mp3,audio/ogg,audio/mp4,audio/asf"
          :multiple="false">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将音频文件拖到此处，或<em>点击选择</em></div>
        </el-upload>
      </div>
      <el-divider></el-divider>
      <div>音频：{{parameter.name||'请选择音频'}}</div>
      <el-divider></el-divider>
      <el-form-item label="输出音频采样率：">
        <el-radio-group v-model="parameter.outsample">
          <el-radio :label="false">默认</el-radio>
          <el-radio :label="11025">11025电话音质</el-radio>
          <el-radio :label="22050">22050广播音质</el-radio>
          <el-radio :label="44100">44100音频CD</el-radio>
          <el-radio :label="48000">48000标准采样率</el-radio>
          <el-radio :label="96000">96000高清晰度DVD</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="输出音频比特率：">
        <el-radio-group v-model="parameter.outbitrate">
          <el-radio :label="false">默认</el-radio>
          <el-radio :label="'96k'">96k</el-radio>
          <el-radio :label="'128k'">128k</el-radio>
          <el-radio :label="'192k'">192k</el-radio>
          <el-radio :label="'320k'">320k</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="输出音频通道：">
        <el-radio-group v-model="parameter.outchannel">
          <el-radio :label="false">默认</el-radio>
          <el-radio :label="1">单声道</el-radio>
          <el-radio :label="2">双声道</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="输出音频格式：">
        <el-radio-group v-model="parameter.outformat">
          <el-radio :label="'mp3'">mp3(.mp3)</el-radio>
          <el-radio :label="'ogg'">ogg(.ogg)</el-radio>
          <el-radio :label="'aac'">aac(.mp4)</el-radio>
          <el-radio :label="'wma'">wma(.asf)</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <el-form ref="form">
      <el-form-item label="操作：">
        <el-button type="primary" v-if="audio_edit.state==1" @click="start">开始编译</el-button>
        <el-button type="primary" v-else @click="stop">停止编译</el-button>
      </el-form-item>
    </el-form>
    <el-progress :text-inside="true" :stroke-width="20" :percentage="audio_edit.progress"></el-progress>
  </div>
</template>
<script>
  import audioedit from '../../static/audio_edit.js';
  export default {
    data(){
      return {
        progress:0,
        parameter:{
          name:"",            //必填，音频文件名，原名
          buffer:false,       //必填，音频buffer
          outformat:"mp3",    //必填，输出编码格式 mp3, ogg, aac(mp4), wma(asf), wav
          outchannel:false,   //选填，输出音频声道数1,2
          outsample:false,    //选填，导出采样率 采样率 11025电话音质 22050广播音质 44100音频CD 48000 96000高清晰度DVD
          outbitrate:false,   //选填，导出比特率 96k、128k、192k、320k
        },
        audio_edit: new audioedit()
      }
    },
    created () {

    },
    mounted(){

    },
    methods: {
      addfile(val){
        var reader = new FileReader();
        reader.onload = async (e) => {
          this.parameter.name=val.file.name;
          this.parameter.buffer=e.target.result;
        };
        reader.readAsArrayBuffer(val.file);
      },
      async start(){
        let res = await this.audio_edit.format(this.parameter);
        if(res.code==200){
          this.download(res.name,res.buffer)
        }else{
          this.$message.error(res.message);
        }
      },
      async stop(){
        this.audio_edit.stop();
      },
      download(name,buffer){
        var href = window.URL.createObjectURL(new Blob([buffer]));
        //生成链接
        const a = document.createElement("a");
        a.download = name;
        a.href = href;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        URL.revokeObjectURL(href);
      },
    }
  }
</script>

